import 'package:flutter/material.dart';
import 'package:flutter_2b_client/apis/MarketApi.dart';
import 'package:flutter_2b_client/model/IntIdAndName.dart';
import 'package:flutter_2b_client/utils/Page.dart';
import 'package:flutter_2b_client/utils/PagingUtils.dart';
import 'package:flutter_2b_client/utils/StringUtils.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

class MarketPage extends HookWidget {
  static String path = "/markets";

  const MarketPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var pagingController =
        usePagingController<Pageable, QueryMarketsResponse>(firstPageKey: Pageable());
    var searchKeywordState = useState("");
    usePagingControllerListener(
        pagingController,
        (pageable) {
          return marketApi.queryMarkets(
            QueryMarketRequest(name: searchKeywordState.value.nullIfEmpty),
            pageable);
        },
        null,
        [searchKeywordState.value]);

    return Scaffold(
      appBar: AppBar(
        title: SearchAnchor(
          builder: (context, controller) {
            return SearchBar(
              controller: controller,
              onChanged: (value) {
                if (value.isNotEmpty) {
                  controller.openView();
                }
              },
              hintText: "搜索卖场",
              leading: const Icon(Icons.search),
              onSubmitted: (value) {
                searchKeywordState.value = value;
              },
              constraints: const BoxConstraints(minWidth: 360.0, maxWidth: 800.0, minHeight: 48),
            );
          },
          suggestionsBuilder: (context, controller) async {
            var text = controller.text;
            if (text.isEmpty) {
              return [];
            }
            var page = await marketApi.queryMarketSummary(text.nullIfEmpty,
                Pageable(page: 1, size: 5).toRequestParamsMap());
            return page.content.map((it) {
              return ListTile(
                title: Text(it.name),
                dense: true,
                onTap: () {
                  searchKeywordState.value = it.name;
                  controller.closeView(it.name);
                  context.push("/markets/${it.id.toString()}");
                },
              );
            });
          },
        ),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: PagedListView<Pageable, QueryMarketsResponse>(
              pagingController: pagingController,
              builderDelegate: PagedChildBuilderDelegate(
                itemBuilder:
                    (BuildContext context, QueryMarketsResponse item, int index) {
                  return ListTile(
                    title: Text(item.name),
                    onTap: () {
                      context.push("/markets/${item.id.toString()}");
                    },
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}
